<template>
    <div class="MessageView">
        <!-- 置顶信息 -->
        <van-swipe-cell :key="index" v-for="(item, index) in topMessages">
            <template #left>
                <van-button square type="primary" text="标为未读" class="butStyle"
                    @click="onClickBtn(index, ['markAsUnreadMsg', 'topMessage'])"
                />
            </template>
            <MessageCell :is_top="true" :item="item" :index="index" :messageType="'topMessage'" /> <!-- 消息 -->
            <template #right>
                <van-button text="取消置顶" class="butStyle" square type="info"
                    @click="onClickBtn(index, ['noTopMsg', 'topMessage'])"
                />
                <van-button text="删除" class="butStyle" square type="danger"
                    @click="onClickBtn(index, ['delMsg', 'topMessage'])"
                />
            </template>
        </van-swipe-cell>

        <!-- 没有置顶的信息 -->
        <van-swipe-cell :key="index" v-for="(item, index) in lastMessageList">
            <template #left>
                <van-button square type="primary" text="标为未读" class="butStyle"
                    @click="onClickBtn(index, ['markAsUnreadMsg', 'bottomMessage'])"
                />
            </template>
            <MessageCell :item="item" :index="index" :messageType="'bottomMessage'" />    <!-- 消息 -->
            <template #right>
                <van-button square type="info" text="立即置顶" class="butStyle"
                    @click="onClickBtn(index, ['is_top', 'bottomMessage'])"
                />
                <van-button square text="删除" type="danger" class="butStyle"
                    @click="onClickBtn(index, ['delMsg', 'bottomMessage'])"
                />
            </template>
        </van-swipe-cell>

        <!-- 暂无消息图标 -->
        <van-empty class="custom-image" description="暂无信息" image="imges/custom-empty-image.png"
            v-if="!lastMessageList.length && !topMessages.length"
        />
    </div>
</template>

<script>
    import MessageCell from "@/components/message/messageCell.vue";
    import { mapMutations, mapState } from "vuex";

    export default {
        name: "MessageView",
        components: {
            MessageCell,
        },
        computed: {
            ...mapState(["lastMessageList", "topMessages"]),
        },
        methods: {
            ...mapMutations(["upMessageStatus"]),
            onClickBtn(index, val) {
                this.upMessageStatus([index, ...val]);
            },
        },
    };
</script>

<style lang="less" scoped>
    .MessageView {
        .van-empty {
            margin-top: 40%;
        }

        .butStyle {
            height: 100%;

        }
    }
</style>
